<template>
  <div
    class="homeShow-container"
    @mousemove="getLocation"
    @mouseleave="getCenter"
    ref="homeShow"
  >
    <div class="imageMove-container" ref="imageMoveDom" :style="imagePosition">
      <ImageLoader
        :src="homeShowObject.bigImg"
        :placeholder="homeShowObject.midImg"
      />
    </div>
    <div class="homeShow-title" ref="title">{{ homeShowObject.title }}</div>
    <div class="homeShow-description" ref="desc">
      {{ homeShowObject.description }}
    </div>
  </div>
</template>

<script>
import ImageLoader from "@/components/ImageLoader";
export default {
  data() {
    return {
      leftDis: null, //HomeShow组件相对窗口左边的距离
      mouseX: null, //鼠标相对HomeShow组件的左边
      mouseY: null,
      width: null,
      height: null,
      newWidth: null,
      newHeight: null
    };
  },
  props: {
    homeShowObject: {
      type: Object,
      required: true,
      titleW: null,
      descW: null,
    },
  },

  components: {
    ImageLoader,
  },
  mounted() {
    let title = this.$refs.title;
    let desc = this.$refs.desc;

    //获取宽度并且记录下来
    this.titleW = getComputedStyle(title).width;
    this.descW = getComputedStyle(desc).width;

    //把宽度设置为0，并恢复透明度
    title.style.width = 0;
    desc.style.width = 0;
    title.style.opacity = 1;
    desc.style.opacity = 1;
    title.clientWidth; //强制渲染一下

    //过渡到原来的宽度
    title.style.width = this.titleW;
    desc.style.width = this.descW;

    //获取该组件左边的距离、宽度、高度
    this.leftDis = this.$refs.homeShow.getBoundingClientRect().left;

    //获取imageloader图片宽度、高度
    this.width = this.$refs.imageMoveDom.getBoundingClientRect().width;
    this.height = this.$refs.imageMoveDom.getBoundingClientRect().height;

    //新尺寸
    this.newWidth = this.width * 1.1;
    this.newHeight = this.height * 1.1;

    //居中
    this.mouseX = this.width / 2;
    this.mouseY = this.height / 2;

    //实时获取HomeShow的尺寸
    window.addEventListener("resize", this.reHomeShowSize);
  },
  destroyed() {
    window.removeEventListener("resize", this.reHomeShowSize);
  },
  computed: {
    imagePosition() {
      //额外的距离
      const extraWidth = parseInt((this.newWidth - this.width) / 2);
      const extraHeight = parseInt((this.newHeight - this.height) / 2);

      //中心坐标
      const centerX = this.width / 2;
      const centerY = this.height / 2;

      //要移动的maginTop、marginLeft
      let marginLeft = parseInt(
        ((this.mouseX - centerX) / centerX) * extraWidth
      );
      let marginTop = parseInt(
        ((this.mouseY - centerY) / centerY) * extraHeight
      );
      isNaN(marginLeft) && (marginLeft = 0);
      isNaN(marginTop) && (marginTop = 0);

      // console.log(-extraWidth,-marginLeft,this.mouseX,centerX);
      return {
        width: this.newWidth + "px",
        height: this.newHeight + "px",
        transform: `translate(${-extraWidth + -marginLeft + "px"},${
          -extraHeight + -marginTop + "px"
        })`,
      };
    },
  },
  methods: {
    getLocation(e) {
      this.mouseX = e.clientX - this.leftDis;
      this.mouseY = e.clientY;
    },
    //回到中心
    getCenter() {
      const extraWidth = parseInt((this.newWidth - this.width) / 2);
      const extraHeight = parseInt((this.newHeight - this.height) / 2);
      this.$refs.imageMoveDom.style.transform = `translate(${
        -extraWidth + "px"
      },${-extraHeight + "px"})`;
    },
    //实时获得尺寸
    reHomeShowSize() {
      this.width = this.$refs.homeShow.getBoundingClientRect().width;
      this.height = this.$refs.homeShow.getBoundingClientRect().height;
      this.newWidth = this.width * 1.1;
      this.newHeight = this.height * 1.1;
    },
  },
};
</script>

<style scoped lang='less'>
.homeShow-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.imageMove-container {
  width: 100%;
  height: 100%;
}

.homeShow-title,
.homeShow-description {
  position: absolute;
  color: white;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
  text-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), -1px 0 0 rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(0, 0, 0, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.5);
  transition: all 1s;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
}

.homeShow-title {
  transform: translateY(-150%);
  font-size: 25px;
}
.homeShow-description {
  transform: translateY(50%);
  font-size: 20px;
}
</style>